<template>
  <div>
    <ul v-for="(item, index) in arr" :key="index">
      <li>
        <div class="div">
          <input type="checkbox" v-model="item.checked" name="" id="">
          <img :src="`http://websong.wang:4000/static/imgs` + item.icon" alt="" />
          <p>商品名：{{ item.goods_name }}</p>
          <div class="div">
            <p>价钱：{{ item.group_price }}元</p>
            <p>
              <button @click="jia(index)">+</button>
              {{item.sales}}
              <button @click="jian(index)">-</button>
            </p>
          </div>
        </div>
      </li>
    </ul>
     全选<input type="checkbox" name="" id="">
    <p>总价：{{allcart}}元</p>

  </div>
</template>

<script>
import axios from "axios"; 
export default {
  data() {
    return {
      arr: [],  
    };
  },
  mounted() {
    this.getdata();
  },
  computed: { 
     allcart(){
      var numall=0
      if(this.sales!=0){
         numall=this.sales*this.group_price
      }
      return numall
    }, 
  },
  methods: {
    getdata() {
      axios.get("http://api.aslegou.top/api/getgoodlist?cateid=2&page=1&size=10&type=1").then((res) => {
        console.log(res.data.result.list);
        this.arr = res.data.result.list;
      });
    },
    
    jia(index){
      this.arr[index].sales++
    } ,
     jian(index){
      this.arr[index].sales--
    } , 
  }, 
  
};
</script>

<style lang="scss" scoped>
ul {
   display: flex;
  list-style: none;
  img{
    width: 100px;
    height: 100px;
  }
  
}
.div{
  display: flex;
}
</style>